<template>
    <div class="all">
        <!-- <div style="text-align:center;font-size:28px;font-weight:bold;">{{$route.name}}</div> -->
        <div class="search">
            <el-form ref="form" :model="priceSearch" :inline="true"  size="mini">
                <el-form-item label="城市：">
                    <!-- <el-input v-model="priceSearch.city" clearable placeholder="请输入设备号"></el-input> -->
                    <el-select v-model="priceSearch.city" clearable placeholder="请选择城市">
                        <el-option v-for="item in cityname" :key="item.id" :label="item.name" :value="item.city"></el-option>
                    </el-select>
                </el-form-item>
                <!-- <el-form-item label="店铺名：">
                    <el-input v-model="priceSearch.storeName" clearable placeholder="请输入店铺名"></el-input>
                </el-form-item> -->
                <el-form-item>
                    <el-button type="primary" @click="searchClick(2)">查 询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="btn" v-if="jurisdiction.add_state === 1">
            <el-button size="medium" type="primary" @click="add()">添 加</el-button>
        </div>
        <span v-else></span>
        <div class="table">
            <!-- 表格 -->
            <el-table
                :data="priceTable"
                border
                height="560"
                :style="{width:screenWidth+'px'}"
                :cell-style="cellStyle"
                :header-cell-style="rowClass"
                @selection-change="allSelectionChange"
            >
                <!-- <el-table-column type="selection" width="80px"></el-table-column> -->
                <el-table-column label="序号" width="80px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.id }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="城市" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.city }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="超时时间(累加)" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.timeout_time }}分钟</span>
                    </template>
                </el-table-column>
                <el-table-column label="超时收费(累加)" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.price }}元</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200px" v-if="jurisdiction.update_state === 1">
                    <template slot-scope="scope">
                        <el-button
                            size="small"
                            type="primary"
                            @click="edit(scope.$index, scope.row)"
                        >修改</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination
                @size-change="pageCount"
                @current-change="currentPageCount"
                :current-page="currentPage"
                :page-sizes="[100, 500,1000,1500, 2000]"
                :page-size="currentCount"
                layout="prev, pager, next, jumper, sizes,total"
                :total="pageResultSize"
            ></el-pagination>
        </div>
        <div>
            <!-- 修改/查看对话框 -->
            <el-dialog
                title="修改/查看"
                width="470px"
                :visible.sync="editVisible"
                center
                @close="closeBrowse"
            >
                <el-form :model="editPrice" ref="editProduct">
                    <el-form-item label="超时时间(累加)：" :label-width="formLabelWidth">
                        <el-input v-model="editPrice.timeout_time" placeholder="请输入超时时间(累加)价格"></el-input>
                    </el-form-item>
                    <el-form-item label="超时收费(累加)：" :label-width="formLabelWidth">
                        <el-input v-model="editPrice.price" placeholder="请输入超时收费(累加)价格"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer">
                    <el-button @click="cancelModify">取 消</el-button>
                    <el-button type="primary" @click="confirmModify">确 定</el-button>
                </div>
            </el-dialog>
            <!-- 添加 -->
            <el-dialog
                title="新增"
                width="470px"
                :visible.sync="addVisible"
                center
                @close="closeAdd"
            >
                <el-form :model="addPrice" ref="addPrice" :rules="rules">
                    <el-form-item label="城市：" :label-width="formLabelWidth" prop="city">
                        <!-- <el-input v-model="addPrice.price" placeholder="请输入超时收费(累加)价格"></el-input> -->
                        <el-select @change="cityverify()" v-model="addPrice.city" placeholder="请选择新增的城市">
                            <el-option v-for="item in cityname" :key="item.id" :label="item.city" :value="item.city"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="超时时间(累加)：" :label-width="formLabelWidth" prop="timeout_time">
                        <el-input v-model="addPrice.timeout_time" placeholder="请输入超时时间(累加)分钟"></el-input>
                    </el-form-item>
                    <el-form-item label="超时收费(累加)：" :label-width="formLabelWidth" prop="price">
                        <el-input v-model="addPrice.price" placeholder="请输入超时收费(累加)价格"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer">
                    <el-button @click="cancelAdd">取 消</el-button>
                    <el-button type="primary" :disabled="verifystate" @click="confirmAdd">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import "../../../static/scss/page.scss";
import utils from "../../util/request";
export default {
    data() {
        return {
            // 分页
            jurisdiction: null,
            currentPage: 1, //初始页面
            currentCount: 100, //当前页面的数据数量
            pageResultSize: 10, //表格数据总数
            screenWidth: window.innerWidth, //可视宽度
            editVisible: false, //修改/查看对话框
            addVisible: false,//添加对话框状态
            formLabelWidth: "130px", //对话框的标签宽度
            cityname: "",
            verifystate: true,
            addPrice: {
                // 添加对话框
                city: "", //店铺id
                timeout_time: "", //超时时间(累加)
                price: "" //超时收费(累加)
            },
            editPrice: {
                // 修改对话框
                // city: "", //店铺id
                id: "",
                city: "",
                timeout_time: "", //超时时间(累加)
                price: "" //超时收费(累加)
            },
            priceSearch: {
                //搜索
                city: "", //设备号
                // storeName: "" //店铺名
            },
            rules: {
                city:[
                    {required: "true",message:"请选择添加的城市",trigger:"change"}
                ],
                timeout_time: [
                    {required: "true",message:"请输入超时时间（累加）",trigger:"blur"}
                ],
                price:[
                    {required: "true",message:"请输入超时后的收费（累加）",trigger:"blur"}
                ]
            },
            priceTable: [
                {
                    city:"123",
                    timeout_time:15,
                    price:5
                },
                {
                    city:"123",
                    timeout_time:15,
                    price:5
                },
                {
                    city:"123",
                    timeout_time:15,
                    price:5
                }
            ]
        };
    },
    methods: {
        searchClick(num) {
            // 查询
            // let that= this;
            let data = {page:this.currentPage,list_rows:this.currentCount};
            this.priceSearch.city !== "" ? data.city = this.priceSearch.city : "";
            utils.request("/timeoutPrice/list", "post",JSON.stringify(data)).then(res => {
                console.log(res);
                this.priceTable = res.data.data.data;
                this.pageRequestSize = res.data.data.total;
                if(num === 2){
                    res.data.data.total 
                    ? this.$message({
                        message: "找到"+res.data.data.total+"条超时信息",
                        type: "success"
                    }) : this.$message("没有符合条件的数据")
                }
            });
            
        },
        edit(index, row) {
            // 修改
            // console.log(row);
            this.editVisible = true;
            this.editPrice.id = row.id;
            this.editPrice.city = row.city;
            this.editPrice.timeout_time = row.timeout_time;
            this.editPrice.price = row.price;
            this.editPrice.index = index;
        },
        confirmModify() {
            // 确认修改:需要手机验证
            let data = {};
            let key = this.editPrice.index;
            for(var i in this.editPrice) this.editPrice[i] !== "" && i !== "index" ? data[i] = this.editPrice[i] : "";
            this.editPrice[i] = "";
            utils.request("/timeoutPrice/update","post",JSON.stringify(data)).then(resp=>{
                console.log(resp)
                if(resp.data.code === 200){
                    console.log(data.price.substring(data.price.length-1) === ".00",data.price.substring(data.price.length-3))
                    data.price = data.price.substring(data.price.length-3) === ".00" ? data.price : data.price+".00"
                    this.priceTable.splice(key,1,data);
                    this.editVisible = false;
                    this.$message({
                        message: "修改成功",
                        type: "success"
                    })
                }else{return}
            })
        },
        cancelModify() {
            // 取消对话框
            this.editVisible = false;
            this.editPrice.timeout_time = "";
            this.editPrice.price = "";
        },
        closeBrowse(){
            // 关闭对话框
            this.editPrice.timeout_time = "";
            this.editPrice.price = "";
        },
        add(){
            this.addVisible = true;
        },
        cityverify(){
            utils.request("/timeoutPrice/list","post",JSON.stringify({page:1,list_rows:10,city:this.addPrice.city})).then(resp=>{
                console.log(resp)
                if(resp.data.data.data.length !== 0){
                    this.$message.error("该城市已存在超时价格方案，请重新选择")
                    this.verifystate = true;
                }else{
                    this.$message({
                        message: "该城市暂无超时价格方案，可以添加",
                        type: "success"
                    })
                    this.verifystate = false;
                }
            })
        },
        confirmAdd() {
            // 确认添加:需要手机验证
            this.$refs.addPrice.validate((valid)=>{
                if(valid){
                    let data = {};
                    for(var i in this.addPrice) data[i] = this.addPrice[i];
                    data.price = data.price.substring(data.price.length-3) === ".00" ? data.price : data.price+".00"
                    utils.request("/timeoutPrice/add", "post",JSON.stringify(data)).then(resp=>{
                        console.log(resp)
                        if(resp.data.code === 200){
                            this.addPrice[i] = "";
                            this.addVisible = false;
                            data.id = resp.data.data
                            this.priceTable.length < this.currentCount ? this.priceTable.push(data) : "";
                        }else{return}
                    })
                }else{return}
            })

        },
        cancelAdd() {
            // 取消对话框
            this.addVisible = false;
            for(var i in this.addPrice) this.addPrice[i] = "";
        },
        closeAdd() {
            // 关闭对话框
            for(var i in this.addPrice) this.addPrice[i] = "";
        },
        //   表格居中
        cellStyle: function({ row, column, rowIndex, columnIndex }) {
            return "text-align:center;";
        },
        rowClass: function({ row, rowIndex }) {
            return "text-align:center;";
        },
        allSelectionChange: function(val) {
            // 获取选中的内容
            console.log(val);
        },
        // 每页数据的数量
        pageCount: function(val) {
            this.currentCount = val;
            this.searchClick(1);
            // utils
            //     .request("stores", "post", {
            //         machine: this.priceSearch.city, //设备号
            //         storeName: this.priceSearch.storeName, //店铺名
            //         deleteFlag: 0, //查询存续
            //         pageStart: this.currentPage, //页面
            //         pageRequestSize: this.currentCount //请求数据数量
            //     })
            //     .then(res => {
            //         console.log(res);
            //         if (res.data.code === 20000) {
            //             let businessHours;
            //             let list = [];
            //             let data = res.data.dataList;
            //             data.forEach(item => {
            //                 if (!item.startTime && !item.endTime) {
            //                     businessHours = "";
            //                 } else {
            //                     businessHours =
            //                         item.startTime + "-" + item.endTime;
            //                 }
            //                 list.push({
            //                     storeId: item.storeId, //店铺id,一台设备一个店铺
            //                     city: item.machine, //设备号
            //                     storeNumber: item.clerkNum, //商户号
            //                     storeName: item.storeName, //门店名称
            //                     storeAdress: item.address, //门店地址
            //                     fastPrice: item.onePrice, //普通洗价格
            //                     exquisitePrice: item.twoPrice, //精洗价格
            //                     timeout_time: "", //小汽车精洗价格
            //                     price: "", //SUV精洗价格
            //                     mpvPrice: "" //MPV精洗价格
            //                 });
            //             });
            //             this.priceTable = list;
            //             this.pageResultSize =
            //                 res.data.pageResult.pageResultSize; //数据库总结果数
            //         } else if (res.data.code === 20004) {
            //             that.$message({
            //                 type: "error",
            //                 message: "请重新登录！"
            //             });
            //             that.$router.push("/");
            //         } else if (res.data.code === 20006) {
            //             // this.priceTable = [];
            //         }
            //     });
        },
        // 点击的第几页
        currentPageCount: function(val) {
            this.currentPage = val;
            this.searchClick(1)
            // utils
            //     .request("stores", "post", {
            //         machine: this.priceSearch.city, //设备号
            //         storeName: this.priceSearch.storeName, //店铺名
            //         deleteFlag: 0, //查询存续
            //         pageStart: this.currentPage, //页面
            //         pageRequestSize: this.currentCount //请求数据数量
            //     })
            //     .then(res => {
            //         console.log(res);
            //         if (res.data.code === 20000) {
            //             let businessHours;
            //             let list = [];
            //             let data = res.data.dataList;
            //             data.forEach(item => {
            //                 if (!item.startTime && !item.endTime) {
            //                     businessHours = "";
            //                 } else {
            //                     businessHours =
            //                         item.startTime + "-" + item.endTime;
            //                 }
            //                 list.push({
            //                     storeId: item.storeId, //店铺id,一台设备一个店铺
            //                     city: item.machine, //设备号
            //                     storeNumber: item.clerkNum, //商户号
            //                     storeName: item.storeName, //门店名称
            //                     storeAdress: item.address, //门店地址
            //                     fastPrice: item.onePrice, //普通洗价格
            //                     exquisitePrice: item.twoPrice, //精洗价格
            //                     timeout_time: "", //小汽车精洗价格
            //                     price: "", //SUV精洗价格
            //                     mpvPrice: "" //MPV精洗价格
            //                 });
            //             });
            //             this.priceTable = list;
            //             this.pageResultSize =
            //                 res.data.pageResult.pageResultSize; //数据库总结果数
            //         } else if (res.data.code === 20004) {
            //             that.$message({
            //                 type: "error",
            //                 message: "请重新登录！"
            //             });
            //             that.$router.push("/");
            //         } else if (res.data.code === 20006) {
            //             // this.priceTable = [];
            //         }
            //     });
        }
    },
    created() {
        let Base64 = require("js-base64").Base64;
        let menuarr = JSON.parse(Base64.decode(sessionStorage.getItem("menuarr")))
        for(var i=0;i<menuarr.length;i++){
            // console.log(menuarr[i].link)
            if(menuarr[i].link === this.$route.path){
                this.jurisdiction = menuarr[i]
            }else{}
        }
        // this.$nextTick(() => {
        //     // 禁用右键
        //     document.oncontextmenu = new Function("event.returnValue=false");
        //     // 禁用选择
        //     document.onselectstart = new Function("event.returnValue=false");
        // });
        this.searchClick(1)
        utils.request("/city/list","post",JSON.stringify({page:1,list_rows:99999999})).then(resp=>{
            console.log(resp)
            this.cityname = resp.data.data.data;
        })
    }
};
</script>



